<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>管理员界面</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
        }

        main {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 800px;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <main>
        <h1>欢迎进入管理员界面</h1>
        <div>
            <button id="but1" onclick="sub1()">获取所有用户信息</button>
            <button id="but2" onclick="sub2()">获取所有变更信息</button>
            <button id="but3" onclick="sub3()">退出</button>
        </div>
        <div id="d"></div>
        <table id="t">
            <thead></thead>
            <tbody></tbody>
        </table>
        <table id="t2">
            <thead></thead>
            <tbody></tbody>
        </table>
    </main>
    <script>
        function sub1() {
            // 清空之前的表格内容
            $('#t thead').empty();
            $('#t tbody').empty();
            $.getJSON("http://localhost:8080/bank/findAllUser")
              .done(function (data) {
                    var theadHtml = '<tr><th>卡号</th><th>姓名</th><th>金额</th></tr>';
                    $('#t thead').append(theadHtml);
                    var tbodyHtml = '';
                    for (var d in data) {
                        tbodyHtml += '<tr>';
                        var i = 0;
                        for (var key in data[d]) {
                            i++;
                            if (i != 3) {
                                tbodyHtml += '<td>' + data[d][key] + '</td>';
                            }
                        }
                        tbodyHtml += '</tr>';
                    }
                    $('#t tbody').append(tbodyHtml);
                })
              .fail(function () {
                    alert('获取用户信息失败，请稍后重试');
                });
        }

        function sub2() {
            // 清空之前的表格内容
            $('#t2 thead').empty();
            $('#t2 tbody').empty();
            $('#d').empty();
            $.getJSON("http://localhost:8080/bank/findAllHistory")
              .done(function (data) {
                    if ($.isEmptyObject(data)) {
                        $('#d').append("没有交易记录");
                    } else {
                        var theadHtml = '<tr><th>卡号</th><th>记录</th><th>日期</th><th>类型</th></tr>';
                        $('#t2 thead').append(theadHtml);
                        var tbodyHtml = '';
                        for (var d in data) {
                            tbodyHtml += '<tr>';
                            for (var key in data[d]) {
                                tbodyHtml += '<td>' + data[d][key] + '</td>';
                            }
                            tbodyHtml += '</tr>';
                        }
                        $('#t2 tbody').append(tbodyHtml);
                    }
                })
              .fail(function () {
                    alert('获取变更信息失败，请稍后重试');
                });
        }

        function sub3() {
            window.open("http://localhost:8080/bank/main.html", "_self");
        }
    </script>
</body>

</html>